<template>
	<zLayout>
		<template v-slot:nav>
			<zNav title="统计" />
		</template>
		<template v-slot:main>
			<view class="main">
				<view class="top">
					<view class="search">
						<uni-icons class="icon" type="search"></uni-icons>
						<input class="input" type="text" v-model="state.keyWord" placeholder="搜索国家综合年报统计详情" />
						<button class="btn">搜索</button>
					</view>
					<view class="info">
						<view class="tip">
							<image :src="tip" class="tipIcon"></image>
							<text class="text">查找信息</text>
						</view>
						<view class="tabs">
							<view class="tab" @click="state.acIndex = i" :class='{activeTab:i===state.acIndex}' v-for="(val,i) in state.tabs">
								{{val.text}}</view>
						</view>
					</view>
				</view>
				<view class="inner">
					<view class="card">
						<uni-card is-shadow is-full>
							<uni-list :border="false" class="list">
								<uni-list-item v-for="(val,index) in state.list" class="listItem" :key="index"
									:show-extra-icon="true" showArrow :thumb="val.thumb" :title="val.title">
								</uni-list-item>
							</uni-list>
						</uni-card>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:menu>
			<zMenu />
		</template>
	</zLayout>
</template>

<script setup>
	import {
		getSource
	} from 'src/plugins/utils'
	const arrowBottom = getSource('images/arrowBottom.png');
	const doc = getSource('images/statistics/doc.png');
	const tip = getSource('images/statistics/tip.png');
	const state = reactive({
		keyWord: '',
		acIndex: 0,
		tabs: [{
				text: '国家综合年报统计'
			},
			{
				text: '火炬统计'
			},
			{
				text: '省专项计划'
			}
		],
		list: [{
				title: '2001年国家综合年报',
				thumb: doc
			},
			{
				title: '2001年国家综合年报',
				thumb: doc
			}
		]
	});
</script>

<style lang="less" scoped>
	@import 'index';
</style>